﻿<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page isELIgnored="false"%>
<c:set var="rootpath" value="${pageContext.request.contextPath}"></c:set>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="title" content="快速注册">
<meta name="description" content="任务管理系统">
<meta name="keywords" content="管理系统">
<title>注册</title>

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="${rootpath }/css/bootstrap.min.css">

<!-- Le styles -->
<link href="${rootpath }/css/bootstrap-combined.min.css"
	rel="stylesheet">
	
<link href="${rootpath }/css/layoutit.css" rel="stylesheet">



<!-- Fav and touch icons -->
<link rel="shortcut icon" href="${rootpath }/img/favicon.png">

<script type="text/javascript" src="${rootpath }/js/jquery-2.0.0.min.js"></script>
<!--[if lt IE 9]>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<![endif]-->
<script type="text/javascript" src="${rootpath }/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${rootpath }/js/jquery-ui.js"></script>
<script type="text/javascript"
	src="${rootpath }/js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="${rootpath }/js/jquery.htmlClean.js"></script>
<script type="text/javascript" src="${rootpath }/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${rootpath }/ckeditor/config.js"></script>
<script type="text/javascript" src="${rootpath }/js/scripts.js"></script>
</head>

<body>

	<div class="container">
	<div align="right">
			<a href="login"><label>返回登录页面</label></a>
		</div>
	
		<div class="row">
			<div class="span4"></div>
			<div class="span4">
				<form method="post" action="register_save">
					<fieldset>
						<legend>快速注册</legend>
						<label>账户</label><input type="email" placeholder="例如：xxx@qq.com"
							name="name" onblur="checkName()" id="name" />
						<div hidden="hidden" id="p2">
							<font color="#FF0000">用户名已存在</font>
						</div>
						
						
						<label>密码</label><input type="password"
							placeholder="长度不少于6位，不多于20位" id="password1" name="password"
							onblur="checkPasswordLength()" />
						<div hidden="hidden" id="p3">
							<font color="#FF0000">密码长度不符合要求</font>
						</div>
						
						
						<label>确认密码</label><input type="password" id="password2"
							placeholder="输入相同密码" onblur="testPassword()" value="" />
						<div hidden="hidden" id="p">
							<font color="#FF0000">两次密码不相同</font>
						</div>
						
						<br/>
						
						<button type="submit" class="btn"
							onclick="return checksubmit()">提交</button>
					</fieldset>

				</form>
			</div>
			<div class="span4"></div>
		</div>
	</div>

	<script type="text/javascript">
		function testPassword() {
			var pass1 = $("#password1").val();
			var pass2 = $("#password2").val();
			if (pass1 === pass2) {
				$("#p").hide();
				return true;
			} else {
				$("#p").show();
				return false;
			}
		}

		function checkName() {
			
			$.ajax({
				url : "checkname",
				type : "post",
				data : {
					'data' : $("#name").val()
				},
				success : function(data) {

					if (data == "false") //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间  
					{
						$("#p2").show();
					} else {
						$("#p2").hide();
					}
				}
			});
			
		}

		function checkPasswordLength() {
			var len = $("#password1").val().length;
			
			var flag=false;
			if (len<6 || len>20) {
				if(len==0){
					$("#p3").hide();
				}else{
					$("#p3").show();
				}
			}else{
				$("#p3").hide();
				flag=true;
			}
			return flag;
		}
		
		function checksubmit(){
			var isHidden = $("#p2").is(":hidden");
			
			var submit= testPassword()&&checkPasswordLength()&& isHidden;
			return submit;
		}
	</script>

</body>

</html>